<template>
    <div>
        <div class="qdbk">
            <template v-for="(item, index) in signlist">
                <div class="itembk" v-if="item.istate == '1' || item.istate == '2'">
                    <div class="itembk1">
                        <div class="title">
                            {{ item.istate == '1' ? '进行中的签到' : '即将开始的签到' }}
                        </div>
                        <div class="qdrq">签到日期：{{ item.studyTime }}</div>
                        <div class="qdsj">签到时间：{{ item.studyStartTime }} ~ {{ item.studyEndTime }}</div>
                        <div class="qdsj">关联课节：{{ item.content }}</div>
                    </div>
                    <div class="itembk2">
                        <div class="totalinfor">
                            <div class="infortop" style="padding: 0;">
                                <span>学员人数：{{ item.totalNum }}</span>
                                <span>迟到人数：{{ item.lateNum }}</span>
                            </div>
                            <div class="inforbm" style="padding: 0;">
                                <span>正常出勤：{{ item.normalNum }}</span>
                                <span>请假人数：{{ item.leaveNum }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="itembk3">
                        <div class="ewm">
                            <img :src="imgurl" class="img1" />
                        </div>
                        <a-button :type="item.istate == '1' ? 'primary' : ''" icon="schedule" class="qdbtn"
                            @click="opendaomodel(item)">
                            开始签到
                        </a-button>
                        <a class="xqa" @click="openmodel(item.partId)">数据详情 ></a>
                    </div>
                </div>
            </template>

        </div>
        <div class="qdsjb">
            <div class="qdsjbsub">
                <div class="title">我的排课列表</div>
                <div class="schedule" v-for="(item0, index1) in curriculumlist">
                    <div class="date">
                        <span class="iconfont icon-rili"></span>
                        <span class="datefont"> {{ item0.partDate }}</span>
                    </div>
                    <div class="module">
                        <template v-for="(item1, index2) in item0.partList">
                            <div class="detail" :class="getClass(item1.istate)">
                                <template v-if="item1.istate == '1'">
                                    <span class="stateicon statejxz">进行中</span>
                                </template>
                                <template v-if="item1.istate == '2'">
                                    <span class="stateicon statewks">未开始</span>
                                </template>
                                <template v-if="item1.istate == '3'">
                                    <span class="stateicon stateywc">已完成</span>
                                </template>
                                <template v-if="item1.istate == '4'">
                                    <span class="stateicon statewks">未开始</span>
                                </template>



                                <div class="bk1">
                                    签到时间：{{ item1.beforehandTime }} ~ {{ item1.afterhandTime }}
                                    <a-divider type="vertical" class="feige" />
                                </div>
                                <div class="bk2">
                                    <span>
                                        学员人数：{{ item1.totalNum }}
                                    </span>
                                    <span>
                                        正常出勤：{{ item1.normalNum }}
                                    </span>
                                    <span>
                                        迟到人数：{{ item1.lateNum }}
                                    </span>
                                    <span>
                                        请假人数：{{ item1.leaveNum }}
                                    </span>
                                    <a-divider type="vertical" class="feige" />
                                </div>
                                <div class="bk3">
                                    <a @click="openmodel(item1.partId)">数据详情 ></a>
                                </div>
                            </div>

                        </template>
                    </div>
                </div>

            </div>
        </div>

        <!-- 模态框 -->
        <a-modal title="签到详情" width="1150px" :visible="Visible" @ok="handleOk" @cancel="handleCancel">
            <div class="infortop">
                <div class="bk1">
                    <ul>
                        <li>班级：{{ detailform.className }}</li>
                        <li>签到课节：{{ detailform.content }}</li>
                        <li>签到日期：{{ detailform.studyTime }}</li>
                        <li>签到时间：{{ detailform.studyStartTime }}~{{ detailform.studyEndTime }}</li>
                    </ul>
                    <a-divider type="vertical" />
                </div>
                <div class="bk2">
                    <div class="echarsbox">
                        <div ref="echartsContaine2" id="echartsContaine2" style="width: 120px; height: 120px;"></div>
                    </div>
                    <div class="totalinfo">
                        <ul>
                            <li>学员人数:{{ detailform.totalNum }}</li>
                            <li>正常出勤:{{ detailform.normalNum }}</li>
                            <li>迟到人数:{{ detailform.lateNum }}</li>
                            <li>请假人数:{{ detailform.leaveNum }}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="table-page-search-wrapper">
                <a-form-model layout="inline" :model="queryParam">
                    <a-row :gutter="10">

                        <a-col :md="6">
                            <a-form-model-item label="姓名/手机号" prop="realname" style="margin-left:8px">
                                <a-input placeholder="请输姓名" v-model="queryParam.studentNickName"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="6">
                            <a-form-model-item label="手机号" prop="realname" style="margin-left:8px">
                                <a-input placeholder="请输入手机号查询" v-model="queryParam.phone"></a-input>
                            </a-form-model-item>
                        </a-col>


                        <a-col :md="6">
                            <a-form-model-item label="考勤结果" prop="realname" style="margin-left:8px">
                                <a-select placeholder="请选择考勤结果" v-model="queryParam.signResult">
                                    <a-select-option value="1">
                                        正常
                                    </a-select-option>
                                    <a-select-option value="2">
                                        迟到
                                    </a-select-option>
                                    <a-select-option value="3">
                                        请假
                                    </a-select-option>
                                    <a-select-option value="4">
                                        缺勤
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>

                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-col :md="6">
                                <a-button type="primary" @click="searchQuery" icon="search"
                                    style="margin-left: 18px">查询</a-button>
                                <a-button type="primary" @click="searchReset" icon="reload"
                                    style="margin-left: 8px">重置</a-button>
                            </a-col>
                        </span>
                    </a-row>
                </a-form-model>
                <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :dataSource="tablelist"
                    :pagination="pagination"  @change="handleTableChange">
                    <template slot="signResult" slot-scope="text, record">
                        <span v-if="record.signResult == '1'">正常</span>
                        <span v-if="record.signResult == '2'">迟到</span>
                        <span v-if="record.signResult == '3'">请假</span>
                        <span v-if="record.signResult == '4'">缺勤</span>
                    </template>
                    <template slot="action" slot-scope="text, record">
                        <a @click="handelpreview(record)">预览</a>
                        <a-divider type="vertical" />
                        <a-popconfirm title="确定删除吗?" @confirm="() => handleDeleteVideo(record.id)">
                            <a>删除</a>
                        </a-popconfirm>

                    </template>
                </a-table>
            </div>
        </a-modal>

        <!-- 班级扫描弹框 -->
		<div class="full-screen-modal" v-if="showModal">
			<span @click="closeModal" class="closebtn">退出</span>
			<vue-baberrage :isShow="barrageIsShow" :barrageList="barrageList" :loop="barrageLoop">
			</vue-baberrage>
<!--			<span style="margin-left: 50px; z-index: 999999;" @click="addToList">测试弹幕</span>
			<span @click="websocktest" style="margin-left: 50px; z-index: 999999;" >webscokt</span>-->
			<div class="content">
				<div class="topinfor" style="height: 50px;">
					<div class="classname">{{ classInfo.name }}</div>
				</div>
				<div class="leftrightbox">
					<div class="tboxleft">
						<div class="signpeop" v-for="(item) in signLogList">
							<div class="shade" v-if="item.signResult == 3 "></div>
							<div class="shade" v-if="item.signResult == 4 "></div>
							<img :src="seturl(item.avatar)" class="img1">
							<div class="name">{{ item.studentNickName }} <span v-if="item.signResult == 2 " class="cdfont" >(迟到)</span></div>
						</div>
					</div>
					<div class="tboxright">
						<div class="bdnumbox">
							<span>已报到:{{ classInfo.arrived }}</span>
							<span>未报到:{{ classInfo.notArrived }}</span>
						</div>
						<div id="qrcode" ref="qrCodeDiv"></div>
						<div class="qrcodeinfor">每隔1分钟自动刷新</div>
					</div>
				</div>
			</div>
		</div>
    </div>
</template>

<script>
import QRCode from "qrcodejs2";
import * as echarts from 'echarts';
import { faceTeachgetProList, l_lecturergetClassList, l_lecturergetSignList, l_lecturergetPartList, getgetPartById, getSignl_lecturerLogInfo, getReportCode,getqdinfo } from '@/api/apiz'

import store from '@/store/'
import Vue from 'vue'

import { ACCESS_TOKEN, TENANT_ID } from "@/store/mutation-types"
export default {
    name: '',
    components: {},
    props: {
        classId: {
            type: String,
            default: ''
        },
		activeKey:{
			type: String,
			default: ''
		}
    },
    data() {
        return {
            imgurl: require("@/assets/erweima.png"),
            Visible: false,
            queryParam: {
                studentNickName: '',
                phone: '',
                signResult: ''
            },
            columns: [
                {
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '姓名',
                    align: "center",
                    dataIndex: 'studentNickName',
                    width: 120,
                    sorter: true
                },
                {
                    title: '手机号',
                    align: "center",
                    width: 100,
                    dataIndex: 'phone',
                },
                {
                    title: '所在小组',
                    align: "center",
                    width: 100,
                    dataIndex: 'name',
                },
                {
                    title: '打卡方式',
                    align: "center",
                    width: 100,
                    dataIndex: 'signModel',
                },
                {
                    title: '考勤结果',
                    align: "center",
                    width: 100,
                    scopedSlots: { customRender: "signResult" },
                    dataIndex: 'signResult',
                }

            ],

            Visible2: false,
            qrcodeTimer: null, // 用于存储定时器的ID
            signlist: [],
            curriculumlist: [], //排课列表
            detailform: {},//
            pagination: {
                current: 1,
                total: 0,
            },
            tablelist: [],
            modelpartid: '',
            modelmyChart: null,
            qrcodeId: '',
			/* 弹框签到 */
			showModal: false,
			/* websockt */
			websock: null,
			lockReconnect: false,
			signLogList: [],
			classInfo: {},
			barrageIsShow: true,
			barrageList: [],
			barrageLoop: false,
			currentId: 0,
			msg: 'Hello vue-baberrage',

        }
    },
    watch: {
        // 监听 classId 的变化
        classId(newVal, oldVal) {
            this.getl_lecturergetSignList(newVal) //顶部签到列表
            this.getl_lecturergetPartList(newVal)
        },
		activeKey(newVal, oldVal) {
			this.getl_lecturergetSignList(newVal) //顶部签到列表
			this.getl_lecturergetPartList(newVal)
		}
    },
    created() {

    },
    mounted() {
		this.getl_lecturergetSignList(this.classId) //顶部签到列表
		this.getl_lecturergetPartList(this.classId)
    },
    methods: {
        //签到列表
        async getl_lecturergetSignList(id) {
            this.signlist = []
            let parms = {
                classId: id
            }
            let res = await l_lecturergetSignList(parms)
            if (res.code == '200' || res.code == 200) {
                this.signlist = res.result.records;
            }
        },
        //我的排课列表
        async getl_lecturergetPartList(id) {
            let parms = {
                classId: id
            }
            let res = await l_lecturergetPartList(parms);
            if (res.code == 200 || res.code == "200") {
                this.curriculumlist = res.result.records || [];

            }

        },
        getClass(state) {
            switch (state) {
                case '1':
                    return 'jxz';
                case '2':
                    return 'wks';
                case '3':
                    return 'ywc';
                case '4':
                    return 'wks';
                default:
                    return '';
            }
        },







        //数据详情
        openmodel(partid) {
            this.Visible = true
            this.gettopinfor(partid);  //弹框上侧信息
            this.getbottomtable(partid)
            this.modelpartid = partid
            this.$nextTick(() => {
                this.drawmodelpie();
            })

        },
        //弹框上侧信息
        async gettopinfor(partid) {
            let parms = {
                partId: partid
            }
            let res = await getgetPartById(parms);
            if (res.code == 200 || res.code == '200') {
                this.detailform = res.result

                this.$nextTick(() => {
                    this.drawmodelpie(this.detailform.normalNum, this.detailform.leaveNum, this.detailform.lateNum);
                })

            }
        },
        //详情table
        async getbottomtable(partId) {
            let parms = {
                partId: partId,
                pageNo: this.pagination.current,
                pageSize: 10,
                ...this.queryParam
            }
            let res = await getSignl_lecturerLogInfo(parms);
            if (res.code == 200 || res.code == '200') {
                this.tablelist = res.result.records
                this.pagination.total = res.result.total || 0;

            }
        },
        /* 搜索统一 */
        searchQuery() {
            this.pagination.current = 1
            this.getbottomtable(this.modelpartid)
        },
        /* 重置 */
        searchReset() {
            this.queryParam = {
                studentNickName: '',
                phone: '',
                signResult: ''
            }
            this.getbottomtable(this.modelpartid)
        },
        handleTableChange(pagination, filters, sorter) {
            //分页、排序、筛选变化时触发
            this.pagination = pagination
            this.getbottomtable(this.modelpartid)
        },
        handleOk() {
            this.Visible = false
        },
        handleCancel() {
            this.Visible = false
        },
        //创建echars
        createchears(normalNum, leaveNum, lateNum, index,domId) {

            let dom = document.getElementById(domId)
          console.log(dom)
            var myChart = echarts.init(dom);
            myChart.setOption({
                tooltip: {
                    trigger: 'item'
                },

                series: [
                    {
                        name: '签到',
                        type: 'pie',
                        radius: ['80%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: normalNum, name: '正常' },
                            { value: leaveNum, name: '请假' },
                            { value: lateNum, name: '迟到' },

                        ],
                        color: [
                            '#51be34', // 直接访问的颜色
                            '#eeda2f', // 邮件营销的颜色
                            '#d7d7d7', // 联盟广告的颜色

                        ],
                    }
                ]
            });
        },
        //模态框 饼图
        drawmodelpie(normalNum, leaveNum, lateNum) {
            if (this.modelmyChart) {
                this.modelmyChart.clear(); // 清空图表内容
            }
            this.modelmyChart = echarts.init(this.$refs.echartsContaine2);
            this.modelmyChart.setOption({
                tooltip: {
                    trigger: 'item'
                },

                series: [
                    {
                        name: '签到',
                        type: 'pie',
                        radius: ['80%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: normalNum, name: '正常' },
                            { value: leaveNum, name: '请假' },
                            { value: lateNum, name: '迟到' },

                        ],
                        color: [
                            '#51be34', // 直接访问的颜色
                            '#eeda2f', // 邮件营销的颜色
                            '#d7d7d7', // 联盟广告的颜色

                        ],
                    }
                ]
            });
        },

        //打开签到弹框
        opendaomodel(item) {
            if (item.istate == '2' || item.istate == 2) {
                return
            }
			this.showModal = true;
			this.getqdinfor(item.partId);
			//开启websockt
			this.initWebSocket(item.partId);
			this.$nextTick(() => {
				this.generateQRCode(item.partId)
			})

        },
		closeModal() {
			this.showModal = false;
		},
		//获取签到大屏信息
		async getqdinfor(partId){
			let parms = {
				partId: partId
			}
			let res = await getqdinfo(parms);
			if(res.code==200 || res.code=='200'){
				this.signLogList = res.result.signLogList
				this.classInfo=res.result.classInfo
			}
		},
		seturl(url) {
			return 'https://guopei.bj.bcebos.com' + url
		},
		/*初始化websock*/
		initWebSocket: function (partId) {
			// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
			var userId = store.getters.userInfo.id;
			var url = window._CONFIG['domianURL'].replace("https://", "wss://").replace("http://", "ws://") + "/websocket/" + partId;
			////console.log(url);
			//update-begin-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
			let token = Vue.ls.get(ACCESS_TOKEN)
			this.websock = new WebSocket(url, [token]);
			//update-end-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
			this.websock.onopen = this.websocketOnopen;
			this.websock.onerror = this.websocketOnerror;
			this.websock.onmessage = this.websocketOnmessage;
			this.websock.onclose = this.websocketOnclose;
		},
		websocketOnopen: function () {
			console.log("WebSocket连接成功");
			//心跳检测重置
			//this.heartCheck.reset().start();
		},
		websocketOnerror: function (e) {
			//console.log("WebSocket连接发生错误，第%s次",this.wsConnectErrorTime);

			this.wsConnectErrorTime = this.wsConnectErrorTime + 1;
			if (this.wsConnectErrorTime > 5) {
				//console.log("WebSocket连接错误超过5次，就不再重新连了！");
				this.lockReconnect = true
				return;
			}

			this.reconnect();
		},
		websocketOnmessage: function (e) {
			//console.log("-----接收消息-------",e.data);
			var data = eval("(" + e.data + ")"); //解析对象
			console.log(data)
			/*  this.voiceBroadcast(data.msgTxt) */
			if (data.cmd == "sign") {
				let websockcontent = { ...data };
				let oindex = this.signLogList.findIndex(item => item.personId === websockcontent.msgId);
				console.log(this.signLogList)
				if (oindex !== -1) {
					this.signLogList[oindex].signResult = websockcontent.signResult
					this.addToList(this.signLogList[oindex]);
					this.classInfo.arrived++
					if (this.classInfo.notArrived > 0) {
						this.classInfo.notArrived--;
					}

				}

			}
			//心跳检测重置
			//this.heartCheck.reset().start();
		},
		websocktest(){
			let websockcontent = {signResult: 2, msgId: '1777876150012997633', cmd: 'sign', msgTxt: '签到成功'}
			let oindex = this.signLogList.findIndex(item => item.personId === websockcontent.msgId);
			alert(oindex)
			if (oindex !== -1) {
				alert(2)
				this.signLogList[oindex].report = websockcontent.signResult
				this.addToList(this.signLogList[oindex]);
				this.classInfo.arrived++
				if (this.classInfo.notArrived > 0) {
					this.classInfo.notArrived--;
				}

			}
		},
		websocketOnclose: function (e) {
			console.log(e)
			//console.log("connection closed (" + e + ")");
			if (e) {

				//console.log("connection closed (" + e.code + ")");
			}

		},
		websocketSend(text) { // 数据发送
			try {
				this.websock.send(text);
			} catch (err) {
				//console.log("send failed (" + err.code + ")");
			}
		},
		reconnect() {
			var that = this;
			if (that.lockReconnect) return;
			that.lockReconnect = true;
			//没连接上会一直重连，设置延迟避免请求过多
			setTimeout(function () {
				console.info("尝试重连...");
				that.initWebSocket();
				that.lockReconnect = false;
			}, 20000);
		},
		heartCheckFun() {
			var that = this;
			//心跳检测,每20s心跳一次
			that.heartCheck = {
				timeout: 20000,
				timeoutObj: null,
				serverTimeoutObj: null,
				reset: function () {
					clearTimeout(this.timeoutObj);
					//clearTimeout(this.serverTimeoutObj);
					return this;
				},
				start: function () {
					var self = this;
					this.timeoutObj = setTimeout(function () {
						//这里发送一个心跳，后端收到后，返回一个心跳消息，
						//onmessage拿到返回的心跳就说明连接正常
						that.websocketSend("HeartBeat");
						console.info("客户端发送心跳");
						//self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
						//  that.websock.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
						//}, self.timeout)
					}, this.timeout)
				}
			}
		},
		addToList(object) {
			this.barrageList.push({
				id: ++this.currentId,
				avatar: this.seturl(object.avatar),
				msg: object.studentNickName + '签到成功',
				time: 15,
				type: ''
			});
		},
		//清除定时器
		clearqrcodeTimer() {
			this.$refs.qrCodeDiv.innerHTML = '';
			if (this.qrcodeTimer) {
				clearInterval(this.qrcodeTimer);
				this.qrcodeTimer = null;
			}
		},
		//创建二维码
		async generateQRCode(partId) {

			this.$refs.qrCodeDiv.innerHTML = '';//为了防止生成多张，生成前先清空原先的；
			let parms = {
				classId: this.classId
			}
			let res = await getReportCode(parms);
			if (res.code = 200 || res.code == '200') {
				this.qrcodeId = res.result.qrcodeId || ''
				let values={
					qrcodeId:this.qrcodeId,
					partId:partId
				}
				let jsonString = JSON.stringify(values);
				if (this.qrcodeId != '') {
					setTimeout(() => {
						new QRCode(this.$refs.qrCodeDiv, {
							text: jsonString, //二维码的内容
							width: 400,            //二维码的宽度
							height: 400,           //二维码的高度
							colorDark: "#333333",  //二维码颜色
							colorLight: "#ffffff", //二维码背景色
							correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
						});
					}, 1000);
				}
			}


		},
		refreshQRCode() {
			this.qrcodeTimer = setInterval(() => {
				// 清除旧的二维码
				this.$refs.qrCodeDiv.innerHTML = '';
				// 重新生成二维码
				this.generateQRCode();
			}, 6000); // 60000毫秒 = 1分钟
		}


    }
}
</script>
<style scoped lang='less'>
.main {
    height: 100%;
    background-color: #fff;

    .topbk {
        height: 100px;
        border-bottom: 1px solid #ccc;
        display: flex;

        .selectbox {
            width: 300px;
            padding-top: 35px;
            padding-left: 20px;

            .selectxm {
                width: 280px;
            }
        }

        .bjbox {
            flex: 1;
            display: flex;
            padding-right: 80px;
            align-items: center;
            justify-content: right;

            .ant-btn {
                margin-right: 10px;
            }
        }
    }

    .bottombk {
        height: calc(100% - 100px);
        display: flex;

        .leftbk {
            width: 150px;
            height: 100%;
        }

        .rightbk {
            height: 100%;
            flex: 1;

            .qdbk {
                padding-left: 20px;
                padding-right: 30px;

                .itembk {
                    padding: 15px 16px;
                    background: #fff;
                    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.16);
                    border-radius: 3px;
                    position: relative;
                    margin-top: 15px;
                    height: 140px;
                    display: flex;

                    .itembk1 {
                        width: 20%;
                        height: 100%;
                        position: relative;
                        border-right: 1px solid #e6e6e6;

                        .title {
                            color: #27313d;
                            font-size: 17px;
                            display: flex;
                            align-items: center;

                            &::before {
                                content: "";
                                width: 4px;
                                height: 18px;
                                background: #006eff;
                                border-radius: 2px;
                                margin-top: 3px;
                                margin-right: 5px;
                                margin-right: 11px;
                                display: block;
                            }
                        }

                        .qdrq {
                            font-size: 14px;
                            font-weight: 400;
                            color: #27313d;
                            line-height: 1;
                            margin-top: 15px;
                            padding-left: 14px;
                        }

                        .qdsj {
                            font-size: 14px;
                            font-weight: 400;
                            color: #27313d;
                            line-height: 1;
                            margin-top: 15px;
                            padding-left: 14px;
                        }

                    }

                    .itembk2 {
                        width: 40%;
                        border-right: 1px solid #e6e6e6;
                        display: flex;
                        align-items: center;
                        padding-left: 150px;
                        justify-content: space-between;
                        padding-right: 80px;

                        .echarsbox {
                            width: 120px;
                            height: 120px;


                        }

                        .totalinfor {
                            height: 100%;
                            padding-top: 21px;
                            width: 200px;
                            font-size: 14px;
                            font-weight: 400;
                            color: #27313d;

                            .infortop {
                                display: flex;
                                justify-content: space-between
                            }

                            .inforbm {
                                margin-top: 20px;
                                display: flex;
                                justify-content: space-between
                            }
                        }
                    }

                    .itembk3 {
                        width: 40%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        padding-left: 180px;

                        .ewm {
                            width: 80px;
                            height: 80px;

                            .img1 {
                                width: 80px;
                                height: 80px;
								border-radius: 0px;
                            }
                        }

                        .qdbtn {
                            margin-left: 30px;
                        }

                        .xqa {
                            margin-left: 30px;
                        }
                    }
                }
            }

            .qdsjb {
                padding-left: 20px;
                padding-right: 30px;

                .qdsjbsub {
                    margin-top: 20px;
                    background: #fff;
                    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.16);
                    border-radius: 3px;
                    padding: 15px 16px;

                    .title {
                        color: #27313d;
                        font-size: 17px;
                        display: flex;
                        align-items: center;

                        &::before {
                            content: "";
                            width: 4px;
                            height: 18px;
                            background: #006eff;
                            border-radius: 2px;
                            margin-top: 3px;
                            margin-right: 5px;
                            margin-right: 11px;
                            display: block;
                        }
                    }
                }

            }
        }
    }
}

.iconfont.icon-rili {
    font-size: 24px;
    color: #1890FF;
    height: 28px;
}

.date {
    display: flex;
    align-items: center;

    .datefont {
        font-size: 18px;
        font-weight: 500;
        color: #5b687b;
        line-height: 1;
        margin-left: 5px;
        position: relative;
        top: 3px;
    }
}

.module {
    border-left: 2px solid #1890FF;
    padding: 14px 0 4px 16px;
    margin-left: 10px;

    .detail {
        height: 60px;
        border-radius: 4px;
        position: relative;
        margin-bottom: 5px;
        display: flex;

        .stateicon {
            position: absolute;
            border-radius: 4px 0 16px 0;
            padding: 3px 10px;
            font-size: 12px;
            line-height: 1;
            left: 0;
            top: 0;
        }

        .statewks {
            background-color: #858c96;
            color: #fff;
        }

        .stateywc {
            background: #51be34;
            color: #fff;
        }

        .statejxz {
            background: #ff7979;
            color: #fff;
        }

        .bk1 {
            width: 32%;
            height: 100%;
            display: flex;
            align-items: center;
            padding-left: 70px;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            font-weight: 400;
            color: #27313d;

            .feige {
                float: right;
                height: 30px;
            }

        }

        .bk2 {
            width: 45%;
            height: 100%;
            display: flex;
            position: relative;
            align-items: center;
            justify-content: center;

            span {
                margin-left: 15px;
            }

            .feige {
                float: right;
                position: absolute;
                right: 0px;
                top: 15px;
                height: 30px;
            }

        }

        .bk3 {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }


    }

    .ywc {
        border: 1px solid #1890Ff;
    }

    .jxz {
        border: 1px solid #ff7979;
    }

    .wks {
        border: 1px solid #bbbbbb;
    }


}

.infortop {
    display: flex;
    padding: 22px 0;

    .bk1 {
        width: 50%;
        position: relative;
        padding-top: 15px;

        .ant-divider-vertical {
            height: 50px;
            position: absolute;
            right: 0px;
            top: 0px;
        }

        ul {
            list-style: none;

            li {
                width: 250px;
                float: left;
                margin-bottom: 15px;
                font-size: 14px;
                font-weight: 400;
                color: rgba(0, 0, 0, .9);
                line-height: 1;
            }
        }
    }

    .bk2 {
        width: 50%;
        display: flex;
        padding-left: 76px;

        .echarsbox {
            width: 30%;
            height: 100%;
            position: relative;
            top: -33px;
        }

        .totalinfo {
            flex: 1;

            ul {
                list-style: none;

                li {
                    width: 120px;
                    float: left;
                    margin-bottom: 10px;
                }
            }
        }
    }
}

/deep/ .ant-btn-primary:active,
.ant-btn-primary.active {
    height: 36px;

}

.tkbox {
    display: flex;
}



.tboxright {
    width: 50%;
    height: 600px;
}
/*弹框*/
.full-screen-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 22;
	background: #6d89f4;
}

.closebtn {
	color: #fff;
	position: absolute;
	width: 50px;
	height: 50px;
	right: 0px;
	top: 10px;
}

.content {
	width: 1280px;
	height: 666px;
	background: #fff;
	border-radius: 8px;

	.tboxleft {
		width: 50%;
		height: 100%;
		border-right: 1px solid #999;
		padding-left: 20px;
		overflow: auto;
	}

	.tboxright {
		width: 50%;
		height: 100%;
		padding: 20px;
		padding-top: 0px;
	}
}

.topinfor {
	height: 15%
}

.leftrightbox {
	height: 85%;
	display: flex;
}

.project {
	text-align: center;
	font-size: 26px;
}

.classname {
	text-align: center;
	font-size: 26px;

}

.signpeop {
	width: 80px;
	height: 80px;
	border-radius: 80px;
	float: left;
	margin-bottom: 25px;
	margin-right: 20px;
	position: relative;
}

.shade {
	background: #000;
	position: absolute;
	height: 80px;
	width: 80px;
	opacity: 0.5;
	border-radius: 80px;
	left: 0px;
}

.img1 {
	width: 80px;
	height: 80px;
	border-radius: 80px;
}

.name {
	text-align: center;
	font-weight: bold;
}

.baberrage-stage {
	height: 80%;
	z-index: 999;
	pointer-events: none;
}

.baberrage-item {
	z-index: 9999;
}

.bdnumbox {
	display: flex;
	justify-content: space-between;
	width: 253px;
	margin: 0 auto;
	font-weight: bold;
	margin-bottom: 10px;
}
#qrcode {
	width: 402px;
	height:402px;
	margin: 0 auto;
	border: 1px solid #bbbbbb;
	border-radius: 3px;
}
.qrcodeinfor  {
	font-size: 14px;
	color: #7f83f7;
	text-align: center;
	margin-top: 10px;
}
.cdfont {
	font-size: 10px;
}
</style>
